<template>
  <SxDialog
    v-drag-dialog
    :title="title"
    :width="width"
    :visible="visible"
    top="5vh"
    @dialog-confirm="dialogConfirm"
    @dialog-close="handleDialogClose"
    @dialog-cancel="handleDialogCancel"
  >
    <div class="SxEquation">
      <el-input type="textarea" :id="SxEquationId" :rows="4" placeholder="请输入内容" v-model="textarea"></el-input>
      <div class="SxEquation_body">
        <div class="SxEquation_body_left">
          <div class="SxEquation_body_left_scroll">
            <div class="SxEquation_body_left_head">可选字段</div>
            <div
              :class="['SxEquation_body_left_item', fieldListIndex == index && 'SxEquation_body_left_hover']"
              v-for="(item,index) in fieldList"
              :key="index"
              @click="fieldListIndex = index"
            >{{item.label}}</div>
          </div>
          <div class="SxEquation_button" @click="fieldEquationPush">插入字段</div>
        </div>
        <div class="SxEquation_body_left">
          <div class="SxEquation_body_left_scroll">
            <div class="SxEquation_body_left_head">函数列表</div>
            <div
              :class="['SxEquation_body_left_item', listIndex == index && 'SxEquation_body_left_hover']"
              v-for="(item,index) in list"
              :key="index"
              @click="listIndex = index"
            >{{item.label}}</div>
          </div>
          <div class="SxEquation_button" @click="equationPush">插入函数</div>
        </div>
        <div class="SxEquation_body_right" v-html="listIndex != null && list[listIndex].html"></div>
      </div>
    </div>
  </SxDialog>
</template>

<script>
import SxDialog from "@Components/Dialog";
import { generateId } from "element-ui/src/utils/util";
export default {
  desc: "公式组件",
  name: "SxEquation",
  components: { SxDialog },
  props: {
    title: String,
    width: String,
    visible: Boolean,
    value: String,
    fieldList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value(val) {
      this.textarea = val ?? "";
    }
  },
  data() {
    return {
      textarea: "",
      list: [
        {
          label: "AND",
          value: "AND()",
          html: `<p style="line-height: 1;"><strong>和</strong></p><p style="line-height: 1;">AND(表达式1,表达式2,...)检查如果全部表达式为真返回(TRUE)，如果其中一个表达式为假，则返回(FALSE)</p><p><br></p>`
        },
        {
          label: "OR",
          value: "OR()",
          html: `<p style="line-height: 1;"><strong>或</strong></p><p style="line-height: 1;">OR(表达式1,表达式2,...)检查如果其中一个表达式为真返回(TRUE)</p><p><br></p>`
        },
        {
          label: "IF",
          value: "IF()",
          html: `<p style="line-height: 1;"><strong>条件</strong></p><p style="line-height: 1;">IF(表达式,"30","50")&nbsp;，IF语句执行表达式。如果表达式为真返回30，如果为假则返回50</p><p><br></p>`
        },
        {
          label: "GETEDITOR",
          value: "GETEDITOR()",
          html: `<p style="line-height: 1;"><strong>获取条件公式的值</strong></p><p style="line-height: 1;">GETEDITOR(优惠券,0)&nbsp;，将返回优惠券条件公式第一个值</p><p><br></p>`
        },
        {
          label: "Math.ceil",
          value: "Math.ceil()",
          html: `<p style="line-height: 1;"><strong>向上取整</strong></p><p style="line-height: 1;"><span style="color: rgb(77, 77, 77); background-color: rgb(255, 255, 255); font-size: 16px; font-family: -apple-system, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif, SimHei, SimSun;">Math.ceil</span>(优惠券)&nbsp;,&nbsp;正数：有小数，舍弃小数，整数就加1。负数：就舍弃小数部分，取整数部分</p><p><br></p>`
        },
        {
          label: "Math.floor",
          value: "Math.floor()",
          html: `<p style="line-height: 1;"><strong>向下取整</strong></p><p style="line-height: 1;">Math.floor(优惠券)&nbsp;,&nbsp;正数：有小数，舍弃小数，只取整数部分。负数：就舍弃小数部分，整数减一</p><p><br></p>`
        },
        {
          label: "Math.round",
          value: "Math.round()",
          html: `<p style="line-height: 1;"><strong>四舍伍入</strong></p><p style="line-height: 1;">Math.round(优惠券)&nbsp;,<span style="color: rgb(77, 77, 77); background-color: rgb(255, 255, 255); font-size: 16px; font-family: -apple-system, &quot;SF UI Text&quot;, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif, SimHei, SimSun;">正数：第一位小数大于5，则整数加1，反之取整数。负数：第一位小数大于5，则取整数，反之整数减1</span></p>`
        },
        {
          label: "-",
          value: "-",
          html: `<p style="line-height: 1;"><strong>减</strong></p><p style="line-height: 1;">两数相减</p><p><br></p><p><br></p>`
        },
        {
          label: "+",
          value: "+",
          html: `<p style="line-height: 1;"><strong>加</strong></p><p style="line-height: 1;">两数相加</p><p><br></p><p><br></p>`
        },
        {
          label: "/",
          value: "/",
          html: `<p style="line-height: 1;"><strong>除</strong></p><p style="line-height: 1;">两数相除</p><p><br></p><p><br></p>`
        },
        {
          label: "*",
          value: "*",
          html: `<p style="line-height: 1;"><strong>乘</strong></p><p style="line-height: 1;">两数相乘</p><p><br></p><p><br></p>`
        }
      ],
      listIndex: null,
      fieldListIndex: null
    };
  },
  computed: {
    SxEquationId() {
      return `sx-equation-${generateId()}`;
    }
  },
  methods: {
    edit(str) {
      var tc = document.getElementById(this.SxEquationId);
      var tclen = tc.value.length;
      tc.focus();
      if (typeof document.selection != "undefined") {
        this.textarea = str;
      } else {
        this.textarea =
          this.textarea.substr(0, tc.selectionStart) +
          str +
          this.textarea.substring(tc.selectionStart, tclen);
      }
    },
    fieldEquationPush() {
      if (this.fieldListIndex == null) return;
      let str = this.fieldList[this.fieldListIndex].value;
      this.edit(str);
    },
    equationPush() {
      if (this.listIndex == null) return;
      let str = this.list[this.listIndex].value;
      this.edit(str);
    },
    handleDialogCancel() {
      this.$emit("update:visible", false);
    },
    handleDialogClose() {
      this.$emit("update:visible", false);
    },
    // 确定
    dialogConfirm() {
      this.$emit("dialogConfirm", this.textarea);
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.SxEquation {
  width: 100%;
  display: flex;
  flex-direction: column;
  &_body {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 5px;
    &_left {
      width: 150px;
      height: 200px;
      margin-right: 10px;
      &_scroll {
        width: 150px;
        height: 170px;
        overflow-y: scroll;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
      }
      &_head {
        width: 100%;
        padding: 5px;
        padding-left: 10px;
        border-bottom: 1px solid #dcdfe6;
        position: sticky;
        top: 0;
        background: #fff;
      }
      &_item {
        width: 100%;
        padding: 5px;
        padding-left: 10px;
        transition: 0.5s;
        cursor: pointer;
      }
      &_item:hover {
        background: #dcdfe6;
      }
      &_hover {
        background: #dcdfe6;
      }
    }
    &_right {
      flex: 1;
      border: 1px solid #dcdfe6;
      padding: 0 5px;
      border-radius: 5px;
    }
  }
  &_button {
    width: 100%;
    border: 1px solid #dcdfe6;
    margin-top: 5px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    transition: 0.5s;
    cursor: pointer;
  }
  &_button:hover {
    background: #dcdfe6;
  }
  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 100px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
    border-radius: 100px;
  }
}
</style>

